<template>
	<div>
		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<a @click="gobackProv">角色管理</a>
					<i class="fa fa-circle"></i>
				</li>
				<li>
					<span>修改角色</span>
				</li>
			</ul>
		</div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="角色名称" prop="jsmc">
				<el-input v-model="ruleForm.jsmc" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="角色模版">
				<el-select v-model="ruleForm.jsmb" @change='getRoleInfo(ruleForm.jsmb,true)' placeholder="请选择角色模版">
					<el-option v-for="rl in roleList" :label="rl.roleName" :key='rl.id' :value="rl.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-for='(vo,voindex) in authlist.subResourceVOList' :label="vo.resourceName" prop="yhgl" v-if='vo.resourceName!="角色管理"'>
				<el-checkbox :indeterminate="vo.isIndeterminate" v-model="vo.checkAll" @change="handleCheckAllChange(vo)">全选</el-checkbox>
				<div></div>
				<el-checkbox-group v-show='false' v-model='vo.selectedSub'>
					<el-checkbox :class="{ 'm-left': auindex===1}" @change='handleCheck(vo,au)' v-model='au.checked' v-for="(au,auindex) in vo.subResourceVOList" :label="au.id" :key="au.id">{{au.resourceName}}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
				<el-button @click="gobackProv">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { RoleSrv } from "./role.service";
	import { Notification } from 'element-ui';

	export default {
		data() {
			return {
				authlist: {},
				roleList: {},
				ruleForm: {
					jsmc: '',
					jsmb: ''
				},
				rules: {
					jsmc: [{
							required: true,
							message: '请输入角色名称',
							trigger: 'blur'
						}
                        ,{
                            min: 1,
                            max: 20,
                            message: '长度在 1 到 20 个字符',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/,
                            message: '角色名称不能包含特殊字符',
                            trigger: 'blur'
                        }
					]
				},
				roleid: this.$route.params.id,
				pageSize: 999,
				pageIndex: 1
			}
		},
		created() {
			this.getRoleInfo(this.roleid);
			this.getRoleList();
		},
		methods: {
			gobackProv() {
				this.$router.push({
					name: 'role'
				});
			},
			handleCheckAllChange(vo) {
				let len = vo.selectedSub.length;
				vo.selectedSub = [];
				if(len != vo.subResourceVOList.length) {
					vo.subResourceVOList.forEach(s => {
						vo.selectedSub.push(s.id);
					})
					Vue.set(vo, 'isIndeterminate', false);
					Vue.set(vo, 'checkAll', true);
				}

			},
			handleCheck(vo) {
				let len = vo.selectedSub.length;
				if(len === vo.subResourceVOList.length&&vo.subResourceVOList.length!=0) {
					Vue.set(vo, 'isIndeterminate', false);
					Vue.set(vo, 'checkAll', true);
				} else if(len < vo.subResourceVOList.length && len > 0) {
					Vue.set(vo, 'isIndeterminate', true);
					Vue.set(vo, 'checkAll', false);
				} else {
					Vue.set(vo, 'isIndeterminate', false);
					Vue.set(vo, 'checkAll', false);
				}
			},
			getAuthList(auths) { // 获取权限列表
				RoleSrv.getAuthList().then(req => {
					if(req.code === 0) {
						req.data[0].subResourceVOList.forEach((su) => {
							su.selectedSub = [];
						})
						this.authlist = req.data[0];
						this.copyAuth(auths);
					}

				})
			},
			getRoleList() { //获取角色列表
				let params = {
					pageNo: this.pageIndex,
					pageSize: this.pageSize
				}
				RoleSrv.list(params).then(req => {
					if(req.code === 0) {
						this.roleList = req.data.records;
					}

				})
			},
			submitForm(formName) {//提交表单，验证参数
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let com='';
						let params = {
							roleID:this.roleid,
							roleName:this.ruleForm.jsmc,
							authorityIds:''
						}
						this.authlist.subResourceVOList.forEach(sr=>{
							if(sr.selectedSub.length>0){
								var str = sr.selectedSub.join(',');
								params.authorityIds = params.authorityIds + com + str;
								com = ',';
							}
						})
						this.updateRole(params);
					} else {
						return false;
					}
				});
			},
			updateRole(params){//创建角色
				RoleSrv.updateRole(params).then(req => {
					if(req.code === 0) {
						Notification.success({
							title: '修改角色',
							message: '操作成功',
							offset: 50
						});
						this.gobackProv();
					}

				})
			},
			getRoleInfo(roleid,isselect){
				let params = {
					roleID:roleid
				};	
				RoleSrv.getRoleInfo(params).then(req => {
					if(req.code === 0) {
						let auths = [];
						if(req.data.authorityIds){
							if(!isselect){
								this.ruleForm.jsmc = req.data.roleName;
							}
							auths = req.data.authorityIds.split(',');
						}
						this.getAuthList(auths);
						
					}
				})
			},
			copyAuth(auths){//复制权限
				this.authlist.subResourceVOList.forEach(vo=>{
					vo.selectedSub = [];
					vo.subResourceVOList.forEach(au=>{
						auths.forEach(auid=>{
							if(au.id === auid){
								vo.selectedSub.push(au.id);
							}
						})
					})
					this.handleCheck(vo);
				})
			}
		}
	}
</script>

<style scoped>
	.el-form {
		width: 500px;
		margin: 0 auto;
		margin-top: 20px;
	}
	
	.el-select {
		width: 100%;
	}
	
	.el-checkbox+.el-checkbox {
		margin-left: 0px;
		margin-right: 15px;
	}
	
	.m-left {
		margin-left: 15px !important;
	}
</style>